<template>
    <div>
        <Alert>
            任务进度：
            <template slot="desc">
                {{progressInfo.processedCount}} / {{progressInfo.totalCount}}
                <br/> {{progressDesc}}
            </template>
        </Alert>

        <Progress :percent="percent" :status="status"></Progress>
        <ButtonGroup>
            <Button type="primary" @click="start">启动</Button>
            <Button icon="ios-plus-empty" @click="add"></Button>
            <Button icon="ios-minus-empty" @click="minus"></Button>
            <Button type="primary" @click="stop">停止</Button>
        </ButtonGroup>



    </div>
</template>
<script>

    var interval=null;

    export default {
        data () {
            return {
                progressInfo:{
                    progressDesc:"",
                    processedCount:0,
                    status:1,
                    totalCount:0
                }
            }
        },
        computed:{
            percent: function () {
                if(this.progressInfo.totalCount==0){
                    return 0;
                }
                return Math.ceil(this.progressInfo.processedCount*100/this.progressInfo.totalCount);
            },
            status:function () {
              var status=this.progressInfo.status;
              if(status==1 || status==0){
                  return "normal";
              }
                if(status==2){
                    return "active";
                }
                if(status==3){
                    return "success";
                }
            },
            progressDesc:function () {
                var status=this.progressInfo.status;
                if(status==0||status==1){
                    return "未启动...";
                }
                if(status==2){
                    return "执行中";
                }
                if(status==3){
                    return "执行成功";
                }
            }
        },
        methods: {
            start(){
                this.progressInfo={
                    totalCount:100,
                    processedCount:0,
                    status:2,
                    progressDesc:"启动了"
                }

                var _this=this;
                if(interval!=null){
                    return;
                }
                interval=setInterval(function () {
                    _this.add();
                },1000);
            },
            add () {
                if (this.progressInfo.processedCount  >= this.progressInfo.totalCount) {
                    this.stop();
                    return false;
                }
                this.progressInfo.processedCount += 10;
            },
            minus () {
                if (this.progressInfo.processedCount <= 0) {
                    return false;
                }
                this.progressInfo.processedCount -= 10;
            },
            stop(){
                if(interval){
                    clearInterval(interval);
                    interval=null;
                }
                if(this.progressInfo.processedCount>=this.progressInfo.totalCount){
                    this.progressInfo.status=3;
                }else{
                    this.progressInfo.status=1;
                }
            }
        }
    }
</script>